<template>
  <a-modal
    :visible="visible"
    :title="title"
    :okText="okText"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('create', index) }"
  >
    <a-form :form="form">
      <a-form-item
        label="最低金额"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-number
          :min="0"
          placeholder="最低金额"
          style="width: 100%;"
          :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{4})+(?!\d))/g, ' ')"
          :parser="value => value.replace(/￥\s?|( *)/g, '')"
          v-decorator="[
            'amountLow',
            {rules: [{ required: true, message: '请输入最低金额' }, { type: 'number', min: 0, message: '金额不小于0'}]}
          ]"
        />
      </a-form-item>
      <a-form-item
        label="最高金额"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-number
          :min="0"
          placeholder="最高金额"
          style="width: 100%;"
          :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{4})+(?!\d))/g, ' ')"
          :parser="value => value.replace(/￥\s?|( *)/g, '')"
          v-decorator="[
            'amountHigh',
            {rules: [{ required: true, message: '请输入最高金额' }, { validator: this.checkMinMax }]}
          ]"
        />
      </a-form-item>
      <a-form-item
        label="服务费率"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-number
          :min="1"
          :max="20"
          :step="1"
          :formatter="value => `${value}%`"
          :parser="value => value.replace('%', '')"
          placeholder="服务费率"
          style="width: 100%;"
          v-decorator="[
            'feeRate',
            {rules: [{ required: true, message: '请输入服务费率' }, { type: 'number', min: 1, max: 20, message: '费率在1%~20%之间'}]}
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      index: -1,
      info: {},
      title: '新增阶梯费率',
      okText: '新增'
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'form_in_modal' })
  },
  methods: {
    add () {
      this.title = '新增阶梯费率',
      this.okText = '新增'
      this.index = -1
    },
    edit (info, index) {
      console.log(info)
      this.title = '编辑阶梯费率',
      this.okText = '保存'
      this.$nextTick(()=>{
        this.form.setFieldsValue({
          amountLow: info.amountLow / 100,
          amountHigh: info.amountHigh / 100,
          feeRate: parseFloat((info.feeRate * 100).toFixed(10))
        })
      })
      
      this.index = index
    },
    checkMinMax (rule, value, callback, source, options) {
      if (value <= this.form.getFieldValue('amountLow')) {
        callback(new Error('不应低于最低金额'))
      } else {
        callback()
      }
    }
  }
}
</script>
